<template>
  <!--  路线、区间档案页面-->
  <div class="box-view">
    <el-row :gutter="15">
      <el-col :span="4" class="left_org">
        <!-- 搜索框 -->
        <organization-tree v-model="deptTree" ref="deptTree" :changeOnSelect='true' placeholder="选择管养单位"
                           @change="selectOrgHandel"></organization-tree>
      </el-col>
      <el-col :span="20">
        <div class="page">
          <div style="padding: 20px 0px 0px 20px">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item @click.native="breadClick(item.deptTreeIdList)" v-for="item in deptTree.breadList"
                                  :key="item.name">
                <el-button type="text" class="bread_button_text">{{item.deptName}}</el-button>
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <el-divider></el-divider>
          <!-- 数据统计-->
          <el-row>
            <el-col :span="8">
              <!--路线统计-->
              <el-card class="card_echarts" shadow="hover">
                <echarts-nesting-change ref="echartsOneChange"></echarts-nesting-change>
              </el-card>
            </el-col>
            <el-col :span="8">
              <!--区间统计-->
              <el-card class="card_echarts" shadow="hover">
                <echarts-nesting-change ref="echartsTwoChange"></echarts-nesting-change>
              </el-card>
            </el-col>
            <el-col :span="8">
              <!--饼图-->
              <el-card class="card_echarts" shadow="hover">
                <echarts-nesting-change ref="echartsThreeChange"></echarts-nesting-change>
              </el-card>
            </el-col>
          </el-row>
          <el-divider></el-divider>
          <div class="page_filter">
            <el-input v-model="form.queryString" clearable placeholder="请输入编号或名称进行查询">
              <template slot="prepend">路线编号/名称</template>
            </el-input>
            <el-select v-model="form.isDept" clearable placeholder="路线范围" style="width: 180px">
              <el-option
                v-for="item in isDeptList"
                :key="item.code"
                :label="item.name"
                :value="item.code">
              </el-option>
            </el-select>
            <el-button class="common_btn-defalut" icon="el-icon-search" @click="form.page=1;queryList()">搜索
            </el-button>
          </div>
          <div class="page_main">
            <el-button icon="el-icon-plus" :disabled="!isAddRoadAuth" @click="handleAdd" class="common_btn-small"
                       style="border: none!important;">
              添加路线
            </el-button>
            <el-button icon="el-icon-plus" :disabled="!isAddRoadAuth" @click="handleAddFileRoad"
                       class="common_btn-small" style="border: none!important;">
              导入路线
            </el-button>
            <el-button icon="el-icon-plus" :disabled="hasPermission('road:roadSection:add')?false:'disabled'"
                       @click="handleAddFile" class="common_btn-small" style="border: none!important;">
              导入区间
            </el-button>
            <div class="common_btnBox">
              <i class="iconfont iconzongshu icon-size"></i>
              总数：{{form.total}}
            </div>
            <!-- table -->
            <el-table
              :data="tableList"
              @expand-change="queryRoadSectionList"
              border>
              <el-table-column type="expand">
                <template slot-scope="scope">
                  <!-- 区间表单 -->
                  <el-table :data="scope.row.children || []" border
                            v-loading="loading">
                    <el-table-column prop="sectionName" show-overflow-tooltip min-width="250"
                                     label="区间名称"></el-table-column>
                    <el-table-column width="180" show-overflow-tooltip label="起止桩号">
                      <template slot-scope="scope" v-if="scope.row.startPointBig!=null && scope.row.endPointBig!=null">
                        K{{scope.row.startPointBig}}+{{scope.row.startPointSmall}}~K{{scope.row.endPointBig}}+{{scope.row.endPointSmall}}
                      </template>
                    </el-table-column>
                    <el-table-column prop="regionName" show-overflow-tooltip min-width="180"
                                     label="行政区"></el-table-column>
                    <el-table-column prop="deptName" show-overflow-tooltip width="200" label="管养单位"></el-table-column>
                    <el-table-column prop="manageModeName" width="120" label="管理模式"></el-table-column>
                    <el-table-column prop="roadGradeName" width="120" label="技术等级"></el-table-column>
                    <el-table-column prop="createTime" width="140" label="创建时间">
                      <template slot-scope="scope">
                        {{scope.row.createTime | formatTimer }}
                      </template>
                    </el-table-column>
                    <el-table-column prop="updateTime" width="140" label="更新时间">
                      <template slot-scope="scope">
                        {{scope.row.updateTime | formatTimer }}
                      </template>
                    </el-table-column>
                    <el-table-column prop="operator" show-overflow-tooltip width="120" label="操作账号"></el-table-column>
                    <el-table-column label="操作" fixed="right" :width="isDelSectionAuth?150:100">
                      <template slot-scope="scope">
                        <button type="text"
                                class="btn_edit"
                                v-if="hasPermission('road:roadSection:add')"
                                @click="handleEditSection(scope.row,false)">
                          编辑区间
                        </button>
                        <button type="text"
                                class="btn_edit"
                                v-else
                                @click="handleEditSection(scope.row,true)">
                          查看区间
                        </button>
                        <el-popconfirm v-if="isDelSectionAuth" confirmButtonText='好的' cancelButtonText='不用了' icon=""
                                       title="确定删除该区间吗？" @confirm="handleDeleteSection(scope.row.id)">
                          <button slot="reference" class="btn_delete">删除</button>
                        </el-popconfirm>
                      </template>
                    </el-table-column>
                  </el-table>
                </template>

              </el-table-column>
              <el-table-column prop="roadCode" width="100" label="路线编号"></el-table-column>
              <el-table-column prop="roadName" min-width="140" show-overflow-tooltip label="路线名称"></el-table-column>
              <el-table-column width="180" label="起止桩号">
                <template slot-scope="scope" v-if="scope.row.startPointBig!=null && scope.row.endPointBig!=null">
                  K{{scope.row.startPointBig}}+{{scope.row.startPointSmall}}~K{{scope.row.endPointBig}}+{{scope.row.endPointSmall}}
                </template>
              </el-table-column>
              <el-table-column prop="startAdmName" show-overflow-tooltip min-width="120"
                               label="路线起点名称"></el-table-column>
              <el-table-column prop="endAdmName" show-overflow-tooltip min-width="120" label="路线终点名称"></el-table-column>
              <el-table-column prop="roadTypeName" width="100" label="路线类型"></el-table-column>
              <el-table-column prop="createTime" width="140" label="创建时间">
                <template slot-scope="scope">
                  {{scope.row.createTime | formatTimer }}
                </template>
              </el-table-column>
              <el-table-column prop="operator" show-overflow-tooltip width="100" label="操作账号"></el-table-column>
              <el-table-column label="操作" :width="isDelRoadAuth?190:100">
                <template slot-scope="scope">
                  <button type="text" class="btn_edit" @click="handleAddSection(scope.row)"
                          v-if="hasPermission('road:roadSection:add')">添加区间
                  </button>
                  <button type="text" v-if="isUpdateRoadAuth" class="btn_add" @click="handleEdit(scope.row,false)">修改
                  </button>
                  <button type="text" v-else class="btn_add" @click="handleEdit(scope.row,true)">查看</button>
                  <el-popconfirm v-if="isDelRoadAuth" confirmButtonText='好的' cancelButtonText='不用了' icon=""
                                 title="确定删除该路线吗？" @confirm="handleDeleteRoad(scope.row.id)">
                    <button slot="reference" class="btn_delete">删除</button>
                  </el-popconfirm>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="form.page"
              :page-size="form.pageSize"
              :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]"
              layout="sizes, prev, pager, next,jumper"
              :total="form.total">
            </el-pagination>
          </div>
          <!-- 新增编辑路线弹窗 -->
          <el-dialog
            :close-on-click-modal="false"
            :title="roadRow.id ? '编辑路线' : '新增路线'"
            :visible.sync="isShowRoadDialog"
            width="800px">

            <!-- 具体form表单 -->
            <el-form label-position="right" ref="roadform" :rules="rules" :model="roadRow" label-width="100px"
                     class="form_width-200">

              <el-row>
                <el-col :span="12">
                  <el-form-item label="路线名称" prop="roadName">
                    <el-input :disabled="isLookRoad" v-model.trim="roadRow.roadName" placeholder="输入路线名称"
                              :maxlength="50"></el-input>
                  </el-form-item>
                  <el-row>
                    <el-col :span="16">
                      <el-form-item label="起点桩号" prop="startPointBig">
                        <el-input :disabled="isLookRoad" v-model.trim="roadRow.startPointBig" type="number"
                                  placeholder="输入数字">
                          <template slot="prepend">K</template>
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label-width="0px" prop="startPointSmall">
                        <el-input :disabled="isLookRoad" v-model.trim="roadRow.startPointSmall" type="number"
                                  :maxlength="3"
                                  placeholder="输入数字">
                          <template slot="prepend"><span style="font-weight: 600;font-size: 20px">+</span></template>
                        </el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-form-item label="起点名称" prop="startAdmName">
                    <el-input :disabled="isLookRoad" v-model.trim="roadRow.startAdmName" placeholder="输入开始地点名称"
                              :maxlength="50"></el-input>
                  </el-form-item>

                </el-col>
                <el-col :span="12">
                  <el-form-item label="路线编号" prop="roadCode">
                    <el-input :disabled="isLookRoad" v-model.trim="roadRow.roadCode" placeholder="输入路线编号"
                              :maxlength="50"></el-input>
                  </el-form-item>
                  <el-row>
                    <el-col :span="16">
                      <el-form-item label="止点桩号" prop="endPointBig">
                        <el-input :disabled="isLookRoad" v-model.trim="roadRow.endPointBig" type="number"
                                  placeholder="输入数字">
                          <template slot="prepend">K</template>
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label-width="0px" prop="endPointSmall">
                        <el-input :disabled="isLookRoad" v-model.trim="roadRow.endPointSmall" type="number"
                                  :maxlength="3"
                                  placeholder="输入数字">
                          <template slot="prepend"><span style="font-weight: 600;font-size: 20px">+</span></template>
                        </el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-form-item label="终点名称" prop="endAdmName">
                    <el-input :disabled="isLookRoad" v-model.trim="roadRow.endAdmName" placeholder="输入结束地点名称"
                              :maxlength="50"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item label="路线类型" prop="roadType">
                <el-radio-group :disabled="isLookRoad" v-model="roadRow.roadType">
                  <el-radio-button v-for="item in EnumRoadTypeList" :key="item.code" :label="item.code">{{item.name}}
                  </el-radio-button>
                </el-radio-group>
              </el-form-item>
            </el-form>
            <!-- 操作按钮 -->
            <span slot="footer" class="dialog-footer" v-if="!isLookRoad ">
        <el-button class="common_btn-white" @click="isShowRoadDialog = false">取消</el-button>
        <el-button class="common_btn-defalut" type="primary" @click="validateRoadForm">确定</el-button>
      </span>
          </el-dialog>
          <!-- 新增编辑区间弹窗 -->
          <el-dialog
            :close-on-click-modal="false"
            :title="currentRow.id ? '编辑区间' : '新增区间'"
            :visible.sync="isShowSectionDialog"
            width="1000px">
            <!-- 具体form表单 -->
            <el-form label-position="right" ref="form" :rules="rules" :model="currentRow" label-width="120px"
                     class="form_width-200">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="路线名称">
                    <el-input v-model.trim="currentRow._roadName" disabled></el-input>
                  </el-form-item>
                  <el-form-item label="区间名称" prop="sectionName">
                    <el-input :disabled="isLookSection" v-model.trim="currentRow.sectionName" placeholder="输入区间名称"
                              :maxlength="50"></el-input>
                  </el-form-item>
                  <el-row>
                    <el-col :span="16">
                      <el-form-item label="起点桩号" prop="startPointBig">
                        <el-input :disabled="isLookSection" v-model.trim="currentRow.startPointBig" type="number"
                                  placeholder="输入数字" @input="calcLength()">
                          <template slot="prepend">K</template>
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label-width="0px" prop="startPointSmall">
                        <el-input :disabled="isLookSection" v-model.trim="currentRow.startPointSmall" type="number"
                                  :maxlength="3"
                                  placeholder="输入数字" @input="calcLength()">
                          <template slot="prepend"><span style="font-weight: 600;font-size: 20px">+</span></template>
                        </el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-form-item label="起点名称" prop="startAdmName">
                    <el-input :disabled="isLookSection" v-model.trim="currentRow.startAdmName"
                              placeholder="输入起点名称"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="路线编号">
                    <el-input v-model.trim="currentRow._roadCode" disabled></el-input>
                  </el-form-item>
                  <el-form-item label="所属行政区" prop="region">
                    <region-unit :disabled="isLookSection" v-model="currentRow.region" ref="regionId"
                                 placeholder="选择行政区" :key="currentRow.region"></region-unit>
                  </el-form-item>
                  <el-row>
                    <el-col :span="16">
                      <el-form-item label="止点桩号" prop="endPointBig">
                        <el-input :disabled="isLookSection" v-model.trim="currentRow.endPointBig" type="number"
                                  placeholder="输入数字" @input="calcLength()">
                          <template slot="prepend">K</template>
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label-width="0px" prop="endPointSmall">
                        <el-input :disabled="isLookSection" v-model.trim="currentRow.endPointSmall" type="number"
                                  :maxlength="3"
                                  placeholder="输入数字" @input="calcLength()">
                          <template slot="prepend"><span style="font-weight: 600;font-size: 20px">+</span></template>
                        </el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-form-item label="止点名称" prop="endAdmName">
                    <el-input :disabled="isLookSection" v-model.trim="currentRow.endAdmName"
                              placeholder="输入终点名称"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-row>
                    <el-col :span="16">
                      <el-form-item label="起点经纬度" prop="startLongitude">
                        <el-input :disabled="isLookSection" v-model.trim="currentRow.startLongitude" type="number"
                                  placeholder="输入经度">
                          <template slot="prepend"><span style="font-size: 15px">E:</span></template>
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label-width="0px" prop="startLatitude">
                        <el-input :disabled="isLookSection" v-model.trim="currentRow.startLatitude" type="number"
                                  placeholder="输入纬度">
                          <template slot="prepend"><span style="font-size: 15px">N:</span></template>
                        </el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-col>

                <el-col :span="12">
                  <el-row>
                    <el-col :span="16">
                      <el-form-item label="止点经纬度" prop="endLongitude">
                        <el-input :disabled="isLookSection" v-model.trim="currentRow.endLongitude" type="number"
                                  placeholder="输入经度">
                          <template slot="prepend"><span style="font-size: 15px">E:</span></template>
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label-width="0px" prop="endLatitude">
                        <el-input :disabled="isLookSection" v-model.trim="currentRow.endLatitude" type="number"
                                  placeholder="输入纬度">
                          <template slot="prepend"><span style="font-size: 15px">N:</span></template>
                        </el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="8">
                  <el-form-item label="里程" prop="length">
                    <el-input v-model.trim="currentRow.length" disabled type="number" placeholder="由起止桩号计算">
                      <template slot="append">米</template>
                    </el-input>
                  </el-form-item>
                  <el-form-item label="车道" prop="roadCount">
                    <el-input :disabled="isLookSection" v-model.trim="currentRow.roadCount" type="number"
                              placeholder="请输入数字">
                      <template slot="append">个</template>
                    </el-input>
                  </el-form-item>
                  <el-form-item label="面层厚度" prop="mianCengWidth">
                    <el-input :disabled="isLookSection" v-model.trim="currentRow.mianCengWidth" type="number"
                              placeholder="请输入数字">
                      <template slot="append">cm</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="修建年度" prop="buildTime">
                    <el-date-picker
                      :disabled="isLookSection"
                      v-model="currentRow.buildTime"
                      type="date"
                      placeholder="选择日期">
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item label="路基宽度" prop="luJiWidth">
                    <el-input :disabled="isLookSection" v-model.trim="currentRow.luJiWidth" type="number"
                              placeholder="请输入数字">
                      <template slot="append">m</template>
                    </el-input>
                  </el-form-item>
                  <el-form-item label="设计速度" prop="speed">
                    <el-input :disabled="isLookSection" v-model.trim="currentRow.speed" type="number"
                              placeholder="请输入数字">
                      <template slot="append">km/h</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="改建年度" prop="changeTime">
                    <el-date-picker :disabled="isLookSection"
                                    v-model="currentRow.changeTime"
                                    type="date"
                                    placeholder="选择日期">
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item label="路面宽度" prop="luMianWidth">
                    <el-input :disabled="isLookSection" v-model.trim="currentRow.luMianWidth" type="number"
                              placeholder="请输入数字">
                      <template slot="append">m</template>
                    </el-input>
                  </el-form-item>
                  <el-form-item label="面层类型" prop="mianCengType">
                    <el-select :disabled="isLookSection" v-model="currentRow.mianCengType" clearable
                               placeholder="面层类型">
                      <el-option
                        v-for="item in EnumMianCengTypeList"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item label="管养单位" prop="deptTreeId">
                <organization :disabled="isLookSection" v-model="currentRow.deptTreeId"
                              placeholder="选择管养单位"></organization>
              </el-form-item>
              <el-form-item label="技术等级" prop="roadGrade">
                <el-radio-group :disabled="isLookSection" v-model="currentRow.roadGrade">
                  <el-radio-button v-for="item in EnumRoadGradeList" :key="item.code" :label="item.code">{{item.name}}
                  </el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="抗震设防等级">
                <el-radio-group :disabled="isLookSection" v-model="currentRow.kangZhenLevel">
                  <el-radio-button v-for="item in EnumKangZhenLevelList" :key="item.code" :label="item.code">
                    {{item.name}}
                  </el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="防洪标准">
                <el-radio-group :disabled="isLookSection" v-model="currentRow.fangHongBiaoZhun">
                  <el-radio-button v-for="item in EnumFangHongBiaoZhunList" :key="item.code" :label="item.code">
                    {{item.name}}
                  </el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="管理模式">
                <el-radio-group :disabled="isLookSection" v-model="currentRow.manageMode">
                  <el-radio-button v-for="item in EnumManageModeList" :key="item.code" :label="item.code">{{item.name}}
                  </el-radio-button>
                </el-radio-group>
              </el-form-item>
            </el-form>
            <!-- 操作按钮 -->
            <span slot="footer" class="dialog-footer" v-if="!isLookSection">
        <el-button class="common_btn-white" @click="isShowSectionDialog = false">取消</el-button>
        <el-button class="common_btn-defalut" type="primary" @click="validateSectionForm">确定</el-button>
      </span>
          </el-dialog>
          <!-- 新增文件编辑弹窗 -->
          <el-dialog title="导入区间" :visible.sync="isShowDialogFile" :close-on-click-modal="false" width="520px">
            <div class="conContent" style="text-align: center">
              <el-divider><span style="color: #1990FE;font-size: 20px">区间数据导入</span></el-divider>
              <br/>
              <el-upload class="upload-demo" ref="quJian"
                         :action="constUrl + '/common/upload/v1/importRoadSection/'+uuid" drag :limit="1"
                         :file-list="quJian.uploadFile"
                         :before-upload="_beforeUpload"
                         :on-exceed="_handleExceed"
                         :on-success="_uploadSuccess"
                         :on-remove="_uploadRemove"
                         :auto-upload="false">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">
                  将文件拖到此处，或<em>点击上传</em>
                  <div class="el-upload__tip" slot="tip">只能上传{{quJian.fileType.toString()}}格式文件，且不超过1M</div>
                </div>
              </el-upload>
              <br/>
              <div style="width: 50%;margin: auto; margin-bottom: 1vw;" v-if="quJian.percentage!==0">
                <el-progress :text-inside="true" :stroke-width="26" :percentage="quJian.percentage"></el-progress>
              </div>
              <el-button icon="el-icon-download" @click.stop="handleOutFile" type="primary" style="background:#4caf50 ">
                导入模板下载
              </el-button>
              <el-button type="primary" @click="validateFormFile('quJian')">立即导入</el-button>
              <el-popconfirm title="重新导入会清空导入文件和错误文件，是否确认？" style="margin-right: 16px"
                             @confirm="refresh">
                <el-button type="primary" style="background:#e91e63;margin-left: 0.5vw" slot="reference">重新导入
                </el-button>
              </el-popconfirm>
              <div class="upload_res_view" v-if="quJian.successCount || quJian.errorCount">
                <div style="padding: 20px">
                  文件导入完成！数据总数：{{quJian.errorCount + quJian.successCount}},<span style="color: #0bb20c">导入成功：{{quJian.successCount}}条;</span>
                  <span style="color: #ff4d51">导入失败:{{quJian.errorCount}}条</span>
                </div>
                <a style="margin-left: 20px" v-if="quJian.errorCount!==0" :href="constUrl + quJian.errFileUrl">
                  <el-button icon="el-icon-download" type="primary" style="background:#e91e63 ">失败文件下载</el-button>
                </a>
              </div>
            </div>
            <!-- 操作按钮 -->
            <span slot="footer" class="dialog-footer">
        <el-button class="common_btn-white" @click="cancleSub()">取消</el-button>
        <el-button :disabled="tipShow" class="common_btn-defalut" type="primary" @click="cancleSub">确定</el-button>
      </span>
          </el-dialog>
          <!--导入路线-->
          <el-dialog title="导入路线" :visible.sync="isShowDialogFileImport" :close-on-click-modal="false" width="520px">
            <div class="conContent" style="margin: auto;text-align: center">
              <el-divider><span style="color: #1990FE;font-size: 20px">路线数据导入</span></el-divider>
              <br/>
              <el-upload class="upload-demo" ref="luXian" :action="constUrl + '/common/upload/v1/importRoad/'+uuid" drag
                         :limit="1"
                         :file-list="luXian.uploadFile"
                         :before-upload="_beforeUpload"
                         :on-exceed="_handleExceed"
                         :on-success="_uploadSuccess"
                         :on-remove="_uploadRemove"
                         :auto-upload="false">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">
                  将文件拖到此处，或<em>点击上传</em>
                  <div class="el-upload__tip" slot="tip">只能上传{{luXian.fileType.toString()}}格式文件，且不超过1M</div>
                </div>
              </el-upload>
              <br/>
              <div style="width: 50%;margin: auto; margin-bottom: 1vw;" v-if="luXian.percentage!==0">
                <el-progress :text-inside="true" :stroke-width="26" :percentage="luXian.percentage"></el-progress>
              </div>
              <el-button icon="el-icon-download" @click.stop="handleOutFileRoad" type="primary"
                         style="background:#4caf50 ">
                导入模板下载
              </el-button>
              <el-button type="primary" @click="validateFormFile('luXian')">立即导入</el-button>
              <el-popconfirm title="重新导入会清空导入文件和错误文件，是否确认？" style="margin-right: 16px"
                             @confirm="refresh">
                <el-button type="primary" style="background:#e91e63;margin-left: 0.5vw" slot="reference">重新导入
                </el-button>
              </el-popconfirm>
              <div class="upload_res_view" v-if="luXian.successCount || luXian.errorCount">
                <div style="padding: 20px">
                  文件导入完成！数据总数：{{luXian.errorCount + luXian.successCount}},<span style="color: #0bb20c">导入成功：{{luXian.successCount}}条;</span>
                  <span style="color: #ff4d51">导入失败:{{luXian.errorCount}}条</span>
                </div>
                <a style="margin-left: 20px" v-if="luXian.errorCount!==0" :href="constUrl + luXian.errFileUrl">
                  <el-button icon="el-icon-download" type="primary" style="background:#e91e63 ">失败文件下载</el-button>
                </a>
              </div>
            </div>
            <!-- 操作按钮 -->

          </el-dialog>
        </div>
      </el-col>
    </el-row>
  </div>

</template>

<script>
  import {
    getRoadList,
    roadUpdate,
    roadAdd,
    getRoadSectionList,
    sectionAdd,
    sectionUpdate,
    deleteSection,
    roadDelete,
    roadSectionImport, importRoadUpload
  } from '@/services/model/road-mgmt'
  import {
    getRoadCount
  } from '@/services/model/statistics'
  import Organization from '@/components/organization-unit/all'
  import OrganizationTree from '@/components/organization-tree/all'
  import Format from '@/utils/format'
  import RegionUnit from '@/components/region-unit2'
  import ItemMixins from "./old-modules/item.mixins";
  import EchartsNestingChange from "./echarts/nesting";
  import constUrl from "../../services/env";
  import {Message} from "element-ui";
  // form表单校验规则
  import Permission from '@/utils/permission'
  import Enums from '@/utils/enums'

  const RULES = {
    sectionName: {required: true, message: '请输入区间名称'},
    deptId: {required: true, message: '请选择管养单位'},
    roadName: {required: true, message: '请输入路线名称'},
    roadCode: {required: true, message: '请输入路线编号'},
    startPointBig: {required: true, message: '请输入起点桩号'},
    endPointBig: {required: true, message: '请输入止点桩号'},
    region: {required: true, message: '请选择行政区'},
    deptTreeId: {required: true, message: '请选择管养单位'},
    roadGrade: {required: true, message: '请选择技术等级'},
  }

  export default {
    components: {RegionUnit, Organization, OrganizationTree, EchartsNestingChange},
    mixins: [ItemMixins,Enums],
    data() {
      return {
        isDeptList:[{code:1,name:'管养路线（已填报）'},{code:2,name:'全部'}],
        uuid: '',
        ws: null,
        quJian: {//区间导入对象
          uploadFile: [],//上传成功的文件
          fileType: ['xlsx', 'xls'],//支持导入文件类型后缀名
          fileName: '',//导入文件名
          files: null,//导入文件流
          errFileUrl: '',//导入失败返回的文件地址
          successCount: '',//导入成功数量
          errorCount: '',//导入失败数量
          percentage: 0
        },
        luXian: {//区间导入对象
          uploadFile: [],//上传成功的文件
          fileType: ['xlsx', 'xls'],//支持导入文件类型后缀名
          fileName: '',//导入文件名
          files: null,//导入文件流
          errFileUrl: '',//导入失败返回的文件地址
          successCount: '',//导入成功数量
          errorCount: '',//导入失败数量
          percentage: 0
        },
        activeName: 'quJian',
        tipShow: false,//提示文字是否显示
        isShowDialogFileImport: false,
        constUrl,
        errFileUrl: '',
        chartsName: ['echartsOneChange', 'echartsTwoChange', 'echartsThreeChange'],
        // 表单
        form: {
          isDept:1,
          page: 1,
          pageSize: 10
        },
        deptTree: {
          breadList: [],//面包屑
          deptTreeId: '',
        },
        // 列表数据
        tableList: [],
        selectOrg: '',
        loading: true,
        projectList: [],
        rules: RULES,
        // 展示添加区间弹窗
        isLookSection: false,
        isShowSectionDialog: false,
        isShowDialogFile: false,
        isShowRoadDialog: false,
        isLookRoad: false,
        // 当前操作的数据对象
        currentRow: {},
        roadRow: {},
        EnumRoadGradeList: [],
        EnumRoadTypeList: [],
        EnumKangZhenLevelList: [],
        EnumFangHongBiaoZhunList: [],
        EnumMianCengTypeList: [],
        EnumManageModeList: [],
        fileName: '',
        newUploadForm: {
          fileName: ''
        },
      }
    },
    filters: {
      // 时间格式化
      formatTimer(timer) {
        if (timer) {
          return Format(new Date(timer), 'yyyy年MM月dd日')
        }
        return ''
      },
    },
    computed: {
      // 判断是否有路线新增权限
      isAddRoadAuth() {
        let permissionList = this.$store.state.userInfo.permissionList || []
        return permissionList.indexOf('road:roadRoute:add') !== -1
      },
      // 判断是否有路线编辑权限
      isUpdateRoadAuth() {
        let permissionList = this.$store.state.userInfo.permissionList || []
        return permissionList.indexOf('road:roadRoute:update') !== -1
      },
      // 判断是否有路线删除权限
      isDelRoadAuth() {
        let permissionList = this.$store.state.userInfo.permissionList || []
        return permissionList.indexOf('road:roadRoute:del') !== -1
      },
      // 判断是否有路线删除权限
      isDelSectionAuth() {
        let permissionList = this.$store.state.userInfo.permissionList || []
        return permissionList.indexOf('road:roadSection:del') !== -1
      },
    },
    activated() {
    },

    beforeDestroy() {
      this.ws.onclose = function (e) { // 监听关闭
        // this.ws.close()
        console.log('连接已关闭...')
      }
    },
    mounted() {
      this.connectSocket()

      this.queryDictList(['EnumManageMode', 'EnumRoadGrade', 'EnumRoadType', 'EnumKangZhenLevel', 'EnumFangHongBiaoZhun', 'EnumMianCengType'],
        ['EnumManageModeList', 'EnumRoadGradeList', 'EnumRoadTypeList', 'EnumKangZhenLevelList', 'EnumFangHongBiaoZhunList', 'EnumMianCengTypeList']);
    },
    methods: {
      // 判断权限
      hasPermission(permissionStr) {
        return Permission(this.$store.state.userInfo, permissionStr)
      },
      cancleSub() { // 取消上传
        this.isShowDialogFile = false
        this.fileName = ''
      },
      // 路线导入模板
      handleOutFileRoad() { // 文件导出
        const {href} = this.$router.resolve({path: '/statics/路线导入模板.xls'})
        window.open(href)
      },
      handleOutFile() { // 文件导出
        const {href} = this.$router.resolve({path: '/statics/区间档案导入模板.xls'})
        window.open(href)
      },
      // 导入导入区间
      handleAddFile() {
        this.activeName = "quJian"
        this.tipShow = false
        this.isLookSection = false
        this.quJian = {//区间导入对象
          uploadFile: [],//上传成功的文件
          fileType: ['xlsx', 'xls'],//支持导入文件类型后缀名
          fileName: '',//导入文件名
          files: null,//导入文件流
          errFileUrl: '',//导入失败返回的文件地址
          successCount: '',//导入成功数量
          errorCount: '',//导入失败数量
          percentage: 0
        },
          this.isShowDialogFile = true
      },
      //导入路线
      handleAddFileRoad() {
        this.activeName = "luXian"
        this.luXian = {//区间导入对象
          uploadFile: [],//上传成功的文件
          fileType: ['xlsx', 'xls'],//支持导入文件类型后缀名
          fileName: '',//导入文件名
          files: null,//导入文件流
          errFileUrl: '',//导入失败返回的文件地址
          successCount: '',//导入成功数量
          errorCount: '',//导入失败数量
          percentage: 0
        },
          this.isShowDialogFileImport = true
      },
      //删除区间
      async handleDeleteRoad(id) {
        let res = await roadDelete({id: id})
        if (res.code === 200) {
          this.$notify({
            type: 'success',
            title: '提示',
            message: '路线删除成功'
          })
        }
        this.queryList()
      },
      //删除区间
      async handleDeleteSection(id) {
        let res = await deleteSection({id: id})
        if (res.code === 200) {
          this.$notify({
            type: 'success',
            title: '提示',
            message: '区间删除成功'
          })
        }
        this.queryList()
      },
      calcLength() {
        let startPointBig = this.currentRow.startPointBig;
        let startPointSmall = this.currentRow.startPointSmall;
        let endPointBig = this.currentRow.endPointBig;
        let endPointSmall = this.currentRow.endPointSmall;
        if (startPointBig && startPointSmall && endPointBig && endPointSmall) {
          startPointBig = Number(startPointBig)
          startPointSmall = Number(startPointSmall)
          endPointBig = Number(endPointBig)
          endPointSmall = Number(endPointSmall)
          this.currentRow.length = (endPointBig * 1000 + endPointSmall) - (startPointBig * 1000 + startPointSmall)
        }
      },
      async getStaticsRoad() {
        let res = await getRoadCount(this.form);
        let data = res.data
        this.$refs['echartsOneChange'].updateEchart('路线统计', data.roadMain, data.roadType, '路线总数', '路线类型')
        this.$refs['echartsTwoChange'].updateEchart('区间统计', data.roadSectionMain, data.roadGrade, '区间总数', '区间类型')
        this.$refs['echartsThreeChange'].updateEchart('组织路线数量', data.roadSectionLength, data.roadSectionOrgCount, '总里程(Km)', '组织路线数')
      },
      //面包屑跳转
      breadClick(deptTreeId) {
        this.$refs.deptTree.changeBread(deptTreeId)
      },
      //组织机构组件回调
      selectOrgHandel() {
        this.$forceUpdate()
        this.form.deptTreeId = this.deptTree.deptTreeId
        this.queryList()
      },
      //添加路线
      handleAdd() {
        this.roadRow = {}
        this.isShowRoadDialog = true
        this.isLookRoad = false
        this.$nextTick(() => {
          this.$refs.roadform.clearValidate()
        })
      },

      handleEdit(row, isLook) {
        this.roadRow = JSON.parse(JSON.stringify(row))
        this.isShowRoadDialog = true
        this.isLookRoad = isLook
        this.$nextTick(() => {
          this.$refs.roadform.clearValidate()
        })
      },

      // 表单提交
      validateRoadForm() {
        this.$refs.roadform.validate((valid) => {
          valid && this.submitRoadData()
        })
      },
      // 路线新增编辑提交数据
      async submitRoadData() {
        // 根据ID判断使用新增还是编辑
        const AJAX_ACTION = this.roadRow.id ? roadUpdate : roadAdd
        let res = await AJAX_ACTION(this.roadRow)
        if (res.code === 200) {
          this.$notify({
            type: 'success',
            title: '提示',
            message: this.form.id ? '区间编辑成功' : '区间添加成功'
          })
        }
        this.isShowRoadDialog = false
        this.queryList()
      },
      // 编辑标段
      handleEditSection(row, isLookSection) {
        this.isShowSectionDialog = true
        this.isLookSection = isLookSection
        this.currentRow = JSON.parse(JSON.stringify(row))
        this.currentRow._roadName = row.roadName
        this.currentRow._roadCode = row.roadCode
        this.$nextTick(() => {
          this.$refs.form.clearValidate()
        })
      },

      // 添加标段
      handleAddSection(row) {
        this.currentRow = {
          roadId: row.id,
          _roadName: row.roadName,
          _roadCode: row.roadCode,
          deptTreeId: this.$store.state.userInfo.organizationId
        }
        this.isLookSection = false
        this.isShowSectionDialog = true
        this.$nextTick(() => {
          this.$refs.form.clearValidate()
        })
      },
      // 展开区间
      async queryRoadSectionList(row, list) {
        this.loading = true
        let item = list.find(x => x.id === row.id)
        // item不存在，则当前是关闭
        if (!item) return false
        const {data} = await getRoadSectionList({roadId: row.id, deptTreeId: this.form.deptTreeId})
        row.children = data
        this.loading = false
      },
      // 当前页码改变
      handleCurrentChange(val) {
        this.form.page = val
        this.queryList()
      },
      // 分页大小改变
      handleSizeChange(val) {
        this.form.pageSize = val
        this.queryList()
      },

      // 表单提交
      validateSectionForm() {
        this.$refs.form.validate((valid) => {
          valid && this.submitSectionData()
        })
      },
      // 区间新增编辑提交数据
      async submitSectionData() {
        // 根据ID判断使用新增还是编辑
        const AJAX_ACTION = this.currentRow.id ? sectionUpdate : sectionAdd
        await AJAX_ACTION(this.currentRow)
        this.$notify({
          type: 'success',
          title: '提示',
          message: this.form.id ? '区间编辑成功' : '区间添加成功'
        })
        this.isShowSectionDialog = false
        let item = this.tableList.find(x => x.id === this.currentRow.roadId)
        // 更新区间数据
        this.queryRoadSectionList(item, [item])
      },
      // 数据查询
      async queryList() {
        const {data} = await getRoadList(this.form)
        let tableList = data?.records || []
        // 设置层级
        const _setLevel = (list, index = 1) => list.map(x => {
          x.children = []
          x._level = index
          x.subMenu && _setLevel(x.subMenu, index + 1)
          return x
        })
        this.tableList = _setLevel(tableList)
        this.allTotal = data?.total
        this.form.size = Number(data?.size)
        this.form.total = Number(data?.total)
        this.getStaticsRoad()
      },
      //导入模板
      refresh() {
        this[`${this.activeName}`] = {
          uploadFile: [],//上传成功的文件
          fileType: ['xlsx', 'xls', 'csv'],//支持导入文件类型后缀名
          fileName: '',//导入文件名
          files: null,//导入文件流
          errFileUrl: '',//导入失败返回的文件地址
          successCount: '',//导入成功数量
          errorCount: '',//导入失败数量
          percentage: 0
        }
        this.$forceUpdate()
      },
      //获取uuid
      getUUID() {
        var s = []
        var hexDigits = '0123456789abcdef'
        for (var i = 0; i < 36; i++) {
          s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1)
        }
        s[14] = '4' // bits 12-15 of the time_hi_and_version field to 0010
        s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1) // bits 6-7 of the clock_seq_hi_and_reserved to 01
        s[8] = s[13] = s[18] = s[23] = '-'
        var uuid = s.join('')
        return uuid
      },
      // 立即导入
      validateFormFile(name) {
        this.$refs[`${name}`].submit();
      },
      //打开sockeet
      connectSocket() {
        this.uuid = this.getUUID();
        let uuid = this.uuid
        if ('WebSocket' in window) {
          // 打开一个 web socket
          // 8.134.64.118:9093
          this.ws = new WebSocket(`ws://8.134.54.223:9999/webSocket/file/upload/${uuid}`)
          this.ws.onopen = function () {
            console.log('websocket 连接上')
          }
          // 连接
          this.ws.onmessage = (evt) => {
            let mes = JSON.parse(evt.data)
            if (mes.code == 200) {
              if (mes.data.percentage) {
                let percentage = mes.data.percentage
                this[`${this.activeName}`].percentage = parseFloat((percentage * 100).toFixed(2))
              } else {
                this[`${this.activeName}`].percentage = 100.00
                this[`${this.activeName}`].errorCount = mes.data.errorCount
                if (mes.data.errorCount !== 0) {
                  this[`${this.activeName}`].errFileUrl = mes.data.errorFileUrl
                }
                this[`${this.activeName}`].successCount = mes.data.successCount
              }

            } else {
              this.$notify({
                type: 'error',
                title: '提示',
                message: mes.message
              })

            }
          }

          this.ws.onerror = function (err) {
          }
        } else {
          // 浏览器不支持 WebSocket
          Message({
            type: 'warning',
            message: '您的浏览器不支持 WebSocket!'
          })
        }
      },
      _uploadSuccess(res, file, fileList) {
        this[`${this.activeName}`].uploadFile = fileList
      },
      // 添加文件个数限制
      _handleExceed() {
        // 每次只能提交一个文件
        if (this[`${this.activeName}`].uploadFile?.length >= 1) {
          this.$message.warning('一次只能导入1个文件')
          return false
        }
      },
      _beforeUpload(file) { // 上传前 文件校验
        this[`${this.activeName}`].files = file
        const fileType = file.name.split('.')[1]
        const supportFileType = this[`${this.activeName}`].fileType
        const isLt2M = file.size / 1024 / 1024 < 1
        if (supportFileType.indexOf(fileType) === -1) {
          this.$message.warning('上传文件只能是' + supportFileType.toString() + '格式!')
          return false
        }
        if (!isLt2M) {
          this.$message.warning('上传文件大小不能超过 1MB!')
          return false
        }
        this[`${this.activeName}`].fileName = file.name
        return
      },
      _uploadRemove(file, fileList) {
        this[`${this.activeName}`].uploadFile = fileList
      },
    }
  }
</script>

<style scoped="scoped" lang="less">
  .card_echarts {
    box-shadow: none;
  }

  .box-view {
    .left_org {
      height: calc(100% - 83px);
      border-radius: 8px;
    }

    .page {
      .page_filter {
        padding: 10px 20px;
      }
    }

    .bread_button_text {
      padding-right: 0px;
      font-size: 18px;
      font-weight: 600;
      color: #1990FE;
    }
  }

  .el-table {
    /deep/ .el-table {
      th {
        background-color: #0DC26B !important;
        padding: 5px !important;
      }
    }
  }

  .page_main {
    /deep/ .el-table__expanded-cell {
      background-color: #e4e4e4 !important;
    }
  }

  .road-name {
    color: #1990FE;
    font-size: 17px;
    font-weight: 600;
  }

  .el-date-editor--date {
    width: 200px;
  }


</style>
